import { useState, useEffect, useRef, useContext } from 'react'
import { Table, Form, Button, Input, message } from 'antd'
import { path, configContext, getLocalValue } from '../../config/env'

function Channel() {
  const [tableData, setData] = useState([])
  const [loading, setLoading] = useState(false)
  const [param, setParam] = useState({
    id: ''
  })
  const [height, setHeight] = useState(600)
  const tableRef = useRef<any>()

  useEffect(() => {
    if (tableRef.current && tableRef.current.offsetHeight) {
      setHeight(tableRef.current.offsetHeight)
    }
  }, [])

  const localValue = useContext(configContext)

  const getData = () => {
    if (!param.id) {
      message.info(getLocalValue(localValue, '请输入节点ID再进行查询', 'enter the node ID for query'))
      return
    }
    setData([])
    setLoading(true)
    fetch(path + '/live_trans_node_channel_list?node_id=' + param.id)
    .then((response) => response.json())
    .then((data) => {
      console.log('data', data)
      setLoading(false)
      if (data) {
        const value = data['Channel list'].map((item:any, index: number) => {
          return {
            index,
            value: item
          }
        })
        setData(value || [])
      }
    })
  }
  
  const getParamValue = (e:any, type:string) => {
    setParam({
      ...param,
      [type]: e.target.value
    })
  }
  
  return ( 
     <div className='table-content' ref={tableRef}>
       <div className='title'>{getLocalValue(localValue, '直播频道', 'live channel')}</div>
       <div className='table'>
        <div className='form'>
        <Form layout='inline'>
          <Form.Item label={getLocalValue(localValue, '节点ID', 'node ID')}>
            <Input style={{width: 200}} value={param.id} allowClear onChange={(e) => getParamValue(e, 'id')} />
          </Form.Item>
          <Form.Item>
            <Button type="primary" onClick={getData}>{getLocalValue(localValue, '查询', 'query')}</Button>
          </Form.Item>
        </Form>
        </div>
        <Table loading={loading} dataSource={tableData} pagination={false} scroll={{y: height - 200}} rowKey='index' columns={
          [{
            title: getLocalValue(localValue, '频道', 'channel'),
            dataIndex: 'value'
          },
          {
            title: getLocalValue(localValue, '操作', 'action'),
            width: 130,
            render: () => {
              return <div></div>
            }
          }]
        } ></Table>
       </div>
     </div>
  );
}

export default Channel